﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-sm-12">
            <p>
               <b>Google Maps</b> is a well known web mapping service provided by Google which has its own API to be used in custom applications. Using this template, you will be able to create a Map View for your SharePoint lists utilizing Google Maps.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Featured screenshots</h3>
        </div>
        <div class="col-sm-8">
            <img src="../Lists/Templates/beta/googlemap/content/imgs/featured.png" class="img-thumbnail" title="featured screenshot" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Supported browsers</h3>
        </div>
        <div class="col-sm-10">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">v8+</span>
                    Internet Explorer
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Firefox
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Google Chrome
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Safari
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Opera
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Required List columns</h3>
            <p>This template can be applied on list views that have the following columns:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-2'>Template Field</th>
                        <th class='col-sm-4'>Type</th>
                        <th class='col-sm-3'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fldTitle</td>
                        <td>Single line of text</td>
                        <td>Location's Title (Name of the city)</td>
                    </tr>
                    <tr>
                        <td>fldLatitude</td>
                        <td>Single line of text</td>
                        <td>Latitude for the location</td>
                    </tr>
                    <tr>
                        <td>fldLongitude</td>
                        <td>Single line of text</td>
                        <td>Longitude for the location</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>If you have different column names you can change them from the <b>Apply</b> tab and change field mappings from the <b>Fields Mapping section</b>.</h5></p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Settings</h3>
            <p>This template has the following settings to play with. Below are the available settings with all options and their default values:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-3'>Setting</th>
                        <th class='col-sm-3'>Default</th>
                        <th class='col-sm-6'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Height</td>
                        <td>400px</td>
                        <td>Map's height</td>
                    </tr>
                    <tr>
                        <td>Width</td>
                        <td>100%</td>
                        <td>Map's width</td>
                    </tr>
                    <tr>
                        <td>centerLatitude</td>
                        <td>25.19709</td>
                        <td>center Latitude for the map</td>
                    </tr>
                    <tr>
                        <td>centerLongitude</td>
                        <td>55.274797</td>
                        <td>center Longitude for the map</td>
                    </tr>
                    <tr>
                        <td>zoom</td>
                        <td>12</td>
                        <td>how much the map will be zoomed</td>
                    </tr>
                    <tr>
                        <td>scaleControl</td>
                        <td>true</td>
                        <td>enables/disables the Scale control that provides a simple map scale</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Getting Latitude &amp; Longitude</h3>
            <p>To get the Latitude and Longitude for a specific location from Google Maps, you can go to Google map's site and search for the name of the target location, for example here is how to get the exact location for Amman:</p>
            <br />
        </div>
        <div class="col-sm-10">
            <img src="../Lists/Templates/beta/googlemap/content/imgs/location.png" class=" img-thumbnail" />
            <br />
            <br />
            As can be seen, you can get the Latitude and Longitude from the url, the first value <b>after the @ sign </b>is the Latitude, and the second one <b>after the comma</b> is the Longitude.
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Credit</h3>
            <p>The following services were used to help creating this template:</p>

        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">

                <tbody>
                    <tr>
                        <td><a href="https://www.google.com/maps/" target="_blank">Google Maps</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>